<!--系统物理设备配置-->
<template>
    <div style="border: 1px solid rgb(185, 185, 185); padding: 5px; height: 700px">
        <el-container>
            <!--云服务器列表-->
            <el-header class="grid-content" align="left">
                云服务器列表
                <!-- 添加云服务器的对话框 -->
                <el-button type="primary" size="small" @click="dialogcloudDataFormVisible = true">添加云服务器</el-button>

                <el-dialog title="请填写要添加云服务器的相关参数" :visible.sync="dialogcloudDataFormVisible" >
                    <el-form :model="form">
                        <el-form-item label="云服务器名称" :label-width="formLabelWidth">
                            <el-input v-model="form.cloudserviceName" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="服务器IP地址" :label-width="formLabelWidth">
                            <el-input v-model="form.cloudipAddress" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogcloudDataFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="cloudsubmitForm">提 交</el-button>
                    </div>
                </el-dialog>
            </el-header>
            <!-- 云服务器列表     -->
            <el-main>
                <el-table
                        :data="cloudData"
                        border
                        style="width: 100%; margin: 0">
                    <el-table-column
                            prop="cloudserviceName"
                            label="云服务器名称"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="cloudipAddress"
                            label="IP地址"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="status"
                            label="运行状态">
                    </el-table-column>
                    <el-table-column
                            prop="time"
                            label="运行时长">
                    </el-table-column>
                </el-table>
            </el-main>
            <el-header class="grid-content" align="left">
                本地服务器列表
                <!-- 添加本地服务器的对话框 -->
                <el-button type="primary" size="small" @click="dialoglocalDataFormVisible = true">添加本地服务器</el-button>
                <el-dialog title="请填写要添加本地服务器的相关参数" :visible.sync="dialoglocalDataFormVisible" >
                    <el-form :model="form">
                        <el-form-item label="本地服务器名称" :label-width="formLabelWidth">
                            <el-input v-model="form.localserviceName" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="服务器IP地址" :label-width="formLabelWidth">
                            <el-input v-model="form.localipAddress" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialoglocalDataFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="localsubmitForm">提 交</el-button>
                    </div>
                </el-dialog>
            </el-header>
            <!--本地服务器列表-->
            <el-main>
                <el-table
                        :data="localData"
                        border
                        style="width: 100%; margin: 0">
                    <el-table-column
                            prop="localserviceName"
                            label="服务器名称"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="localipAddress"
                            label="IP地址"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="status"
                            label="运行状态">
                    </el-table-column>
                    <el-table-column
                            prop="time"
                            label="运行时长">
                    </el-table-column>
                    <el-table-column
                            prop="cpu"
                            label="CPU使用率">
                    </el-table-column>
                    <el-table-column
                            prop="memory"
                            label="内存占用率">
                    </el-table-column>
                    <el-table-column
                            prop="rate"
                            label="网络即时速率">
                    </el-table-column>
                </el-table>
            </el-main>
        </el-container>
    </div>
</template>

<script >
    import axios from 'axios'
    export default {
        data: function () {
            return {
                form: { // 表单数据
                    cloudserviceName: "",
                    cloudipAddress: "",
                    localserviceName: '',
                    localipAddress: ''
                },
                cloudData: [{
                    cloudserviceName: '',
                    cloudipAddress: '',
                }],
                localData: [
                    {
                        localserviceName: '',
                        localipAddress: '',
                        status: '',
                        time: '',
                        cpu: '',
                        memory: '',
                        rate: ''
                    }],
                dialogcloudDataFormVisible: false,//控制添加云服务器对话框的显示
                dialoglocalDataFormVisible: false,//控制添加本地服务器对话框的显示
                formLabelWidth: '120px'//对话框宽度
            }
        },
        mounted() {
            //异步请求云/本地服务器列表
            axios.get("/api/systemTask/localList").then(res => {
                this.localData = res.data.data;
            })
            axios.get("/api/systemTask/cloudList").then(res => {
                this.cloudData = res.data.data;
            })
        },
        methods:{
            cloudsubmitForm() {
                axios.post('/api/systemTask/cloudService', this.form, {
                    headers: {
                        'Content-Type': 'application/json' // 设置请求头，确保服务器正确解析 FormData
                    }
                })
                    .then(res => {
                        console.log(res.data);
                        // 可以在这里将返回的数据添加到云服务器列表中
                        this.cloudData.push({
                            cloudserviceName: this.form.cloudserviceName,
                            cloudipAddress: this.form.cloudipAddress,
                        });

                        // 提交完成后关闭对话框
                        this.dialogcloudDataFormVisible = false;
                    })
            },
            localsubmitForm() {
                axios.post('/api/systemTask/localService', this.form, {
                    headers: {
                        'Content-Type': 'application/json' // 设置请求头，确保服务器正确解析 FormData
                    }
                })
                    .then(res => {
                        console.log(res.data);
                        // 可以在这里将返回的数据添加到云服务器列表中
                        this.localData.push({
                            localserviceName: this.form.localserviceName,
                            localipAddress: this.form.localipAddress,
                        });

                        // 提交完成后关闭对话框
                        this.dialoglocalDataFormVisible = false;
                    })
            }
        }
    }
</script>

<style >

</style>
